<template>
  <span class="area-nodes">
    {{ nodeText }}
  </span>
</template>

<script>
import { regionCitys } from '@/library'
export default {
  name: 'LevelAreaCell',
  props: {
    value: {
      type: Array,
      required: true
    }
  },
  computed: {
    areas: {
      get() {
        return [...this.value]
      },
      set(val) {
        this.$emit('input', [...val])
      }
    },
    nodeText2() {
      var citys = regionCitys
      var checkNodeIds = []
      for (var i = 0, size = citys.length; i < size; i++) {
        var node = citys[i]
        if (this.areas.indexOf(node.code) === -1) {
          continue
        }
        checkNodeIds.push(node.name)
      }
      return checkNodeIds.join('、')
    },
    nodeText() {
      var codes = this.areas.map(item => {
        if (typeof item === 'object') {
          return item.code
        } else {
          return item
        }
      })
      var citys = regionCitys
      var checkNodeIds = []
      for (var i = 0, size = citys.length; i < size; i++) {
        var node = citys[i]
        if (codes.indexOf(node.code) === -1) {
          continue
        }
        checkNodeIds.push(node.name)
      }
      return checkNodeIds.join('、')
    }
  },
  mounted() {},
  methods: {
    asNodeText(data) {
      var texts = data.name
      if (data.children && data.children.length) {
        var nodes = data.children.map(item => {
          return item.name
        })
        texts += `(${nodes.join(',')})`
      }
      return texts
    }
  }
}
</script>

<style lang="scss" scoped>
.area-nodes {
  font-size: 12px;
}
</style>
